var perfil = document.querySelector('#perfil')
var usernameForm = document.querySelector('#form-username').addEventListener('submit', getProfile, false)

function getProfile(e) {
  e.preventDefault()
  var username = document.querySelector('#username').value
  if (!username || username == '') {
    username = 'avena'
  }
  var xhttp = new XMLHttpRequest()
  xhttp.onreadystatechange = function () {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      var user = JSON.parse(xhttp.responseText)
      perfil.innerHTML = `
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">${user.name}</h3>
        </div>
        <div class="panel-body">
          <div class="row">

            <div class="col-md-3">
              <img src="${user.avatar_url}" class="img-responsive">
            </div>

            <div class="col-md-9">

              <ul class="list-group">
                <li class="list-group-item">Localização: ${user.location}</li>
                <li class="list-group-item">Criado: ${user.created_at}</li>
              </ul>

            </div>
          </div>
        </div>
      </div>`
    }
  }

  xhttp.open('GET', 'https://api.github.com/users/' + username, true)
  xhttp.send()
}

